<template>
  <div class="wel-content" id="welContent">
    <WelTop />
    <WelMain />
  </div>
</template>

<script setup name="welIndex">
import WelTop from './components/wel-top.vue';
import WelMain from './components/wel-main.vue';
import autofit from 'autofit.js'
import {
  onMounted,
  onUnmounted,
} from 'vue';
onMounted(() => {
  autofit.init(
    {
      dh: 810,
      dw: 1920,
      el: '#welContent',    //绑定的元素
      resize: true,
    },
    false
  );
});
onUnmounted(() => {
  autofit.off();    //关闭销毁autofit.js
});
</script>

<style scoped>
.wel-content{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  background-color: #0a063a;
}
.wel-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 235px;
  /* height: 510px; */
  height: 92%;
  bottom: 0;
  background: url("./img/backLeft.png") 0% 0% no-repeat;
  /* background-size: 100% 100%; */
  background-size: contain;
  background-position: left bottom;
  opacity: 1;  /* 设置背景图的透明度，0.5为50%的透明度 */
  z-index: -1;  /* 确保背景图在背景色下面 */
}
.wel-content::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0%;
  width: 529px;
  /* height: 574px; */
  height: 95%;
  bottom: 0;
  background: url("./img/backRight.png") 0% 0% no-repeat;
  /* background-size: 100% 100%; */
  background-size: contain;
  background-position: right bottom;
  opacity: 1;  /* 设置背景图的透明度，0.5为50%的透明度 */
  z-index: -1;  /* 确保背景图在背景色下面 */
}
.el-font-size {
  font-size: 14px;
}
</style>
